<script lang="ts" name="gatechas">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus';

export default {
  setup() {
    
    const router = useRouter()

    onMounted(() => {


      // 图表
      type EChartsOption = echarts.EChartsOption;

      var chartDom = document.getElementById('gatechas')!;
      var myChart = echarts.init(chartDom);
      window.onresize = function () {
        myChart.resize();
      };
      var option: EChartsOption;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '3%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 10
          },
          boundaryGap: false,
          data: ['2022-08-11', '2022-08-12', '2022-08-13', '2022-08-14', '2022-08-15', ]
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: "#505050"
            }
          },

        },
        series: [
          {
            name: '出勤人数',
            type: 'line',
            colorBy: "data",
            stack: 'Total',
            data: [158, 256, 189, 189, 246]
          },
          {
            name: '在册人数',
            type: 'line',
            colorBy: "data",
            stack: 'Total',
            data: [356, 358, 318, 398, 348,]
          }
        ]
      };

      option && myChart.setOption(option);

    })

    return {
      // router
    }
  },
}

</script>

<template>
  <div id="gatechas" style="height: 100%;"></div>
</template>

<style scoped lang="scss">
</style>
